<template>
  <div class="bar-wapper">
    <img src="@/assets/img/panel/titlePageArchiveNum.png" width="460" alt="" />
    <div class="chart-box">
      <div ref="pieChart" style="width: 420px; height: 260px"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;

const props = defineProps({
  data: {
    type: Array
  }
});
watch(
  () => props.data,
  (newVal) => {
    newVal && createPieChart();
  }
);

const pieChart = ref(null);
let chartInstance: any = null;

const createPieChart = () => {
  if (!pieChart.value) return;
  chartInstance = echarts.init(pieChart.value);
  const slice = JSON.parse(JSON.stringify(props.data));
  const sort = slice.sort((a: any, b: any) => new Date(a.date).getTime() - new Date(b.date).getTime());
  const xData = sort.map((item) => item.date);
  const yNumData = sort.map((item) => item.incPageArchivesNum);
  const yMonthData = sort.map((item) => item.incPageArchivesMonthOnMonth.replace('%', ''));
  const yYearData = sort.map((item) => item.incPageArchivesYearOnYear.replace('%', ''));
  const option: EChartsOption = {
    tooltip: {
      trigger: 'axis'
    },
    legend: [
      {
        data: [{ name: '新增环比', icon: 'rect' }],
        textStyle: {
          color: 'rgba(255, 255, 255, 0.65)', // 图例文字颜色
          fontSize: 12
        },
        top: 8, // 图例距离顶部的距离
        right: 185, // 图例距离右侧的距离
        itemWidth: 16,
        itemHeight: 2
      },
      {
        data: [{ name: '新增同比', icon: 'rect' }],
        textStyle: {
          color: 'rgba(255, 255, 255, 0.65)',
          fontSize: 12
        },
        top: 8,
        right: 105,
        itemWidth: 16,
        itemHeight: 2,
        itemStyle: {
          color: 'rgba(250, 173, 20, 1)'
        }
      },
      {
        data: [{ name: '新增档案数量', icon: 'rect' }],
        textStyle: {
          color: 'rgba(255, 255, 255, 0.65)',
          fontSize: 12
        },
        top: 8,
        right: 10,
        itemWidth: 8,
        itemHeight: 8
      }
    ],
    xAxis: {
      type: 'category',
      data: xData,
      boundaryGap: true,
      axisLabel: {
        fontSize: 10,
        color: 'rgba(255,255,255,0.65)' // 坐标轴字体颜色
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.65)' // 坐标轴线颜色
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '单位：%',
        axisLabel: {
          color: 'rgba(255,255,255,0.65)' // 坐标轴字体颜色
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(109, 163, 240, 0.12)' // 网格线颜色
          }
        },
        nameTextStyle: {
          // 单位标签样式
          color: 'rgba(0, 218, 255, 1)', // 单位标签颜色
          fontSize: 14 // 单位标签字体大小
        }
      },
      {
        type: 'value',
        name: '数量',
        axisLabel: {
          color: 'rgba(255,255,255,0.65)' // 坐标轴字体颜色
        },
        splitLine: null,
        nameTextStyle: {
          color: 'rgba(0, 218, 255, 1)',
          fontSize: 14
        }
      }
    ],
    series: [
      {
        name: '新增环比',
        data: yMonthData,
        type: 'line',
        smooth: true,
        yAxisIndex: 0, // 使用第一个 y 轴（左边）
        lineStyle: {
          color: 'rgba(0, 90, 234, 1)' // 曲线颜色
        }
      },
      {
        name: '新增同比',
        data: yYearData,
        type: 'line',
        smooth: true,
        yAxisIndex: 0, // 使用第一个 y 轴（左边）
        lineStyle: {
          color: 'rgba(250, 173, 20, 1)' // 曲线颜色
        }
      },
      {
        name: '新增档案数量',
        data: yNumData,
        type: 'bar',
        barWidth: '15px',
        yAxisIndex: 1, // 使用第二个 y 轴（右边）
        itemStyle: {
          color: {
            type: 'linear',
            x: 0, // 渐变起点横坐标
            y: 0, // 渐变起点纵坐标
            x2: 0, // 渐变终点横坐标
            y2: 1, // 渐变终点纵坐标
            colorStops: [
              { offset: 0, color: '#00DAFF' }, // 起点颜色
              { offset: 1, color: '#0098D2' } // 终点颜色
            ]
          }
        }
      }
    ],
    grid: {
      width: '85%',
      left: '10%',
      bottom: '15%'
    }
  };
  chartInstance.setOption(option);
};

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
  }
});
</script>
<style lang="less" scoped>
.bar-wapper {
  width: 460px;
  height: 312px;
  display: flex;
  flex-direction: column;
  .chart-box {
    background: rgba(28, 53, 80, 0.49);
  }
}
</style>
